<template>
<div class="component-container">
    <!-- 组件内容 -->
    <h1>{{ title }}</h1>
    <p>{{ description }}</p>
</div>
</template>

<script>
export default {
    name: 'ComponentName', // 修改为你的组件名

    components: {
        // 在这里注册子组件
    },

    props: {
        // 在这里定义组件属性
        propExample: {
            type: String,
            default: '',
            required: false
        }
    },

    data() {
        return {
            // 在这里定义响应式数据
            title: '组件标题',
            description: '组件描述'
        }
    },

    computed: {
        // 在这里定义计算属性
        computedExample() {
            return this.title + ' - ' + this.description
        }
    },

    watch: {
        // 在这里定义侦听器
        title(newVal, oldVal) {
            console.log('title changed:', oldVal, '->', newVal)
        }
    },

    created() {
        // 在组件创建时调用
        console.log('组件被创建')
    },

    mounted() {
        // 在组件挂载到DOM后调用
        console.log('组件已挂载')
    },

    methods: {
        // 在这里定义组件方法
        methodExample() {
            return 'Hello World'
        }
    }
}
</script>

<style scoped>
/* 组件样式 */
.component-container {
    padding: 16px;
}
</style>

<!-- 使用说明:
1. 复制此文件作为新组件的起点
2. 修改组件名称、属性、数据等
3. 删除不需要的部分
4. 确保模板中使用的所有属性在data、computed、props或methods中定义过
-->